<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <title>Start with pixi.js</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.4.3/pixi.min.js"></script>
<script type="text/javascript">
//别名（Aliases）
var Container = PIXI.Container,
    autoDetectRenderer = PIXI.autoDetectRenderer,
    Text = PIXI.Text

//基础代码
var stage = new Container(),
    renderer = autoDetectRenderer(256, 256);
document.body.appendChild(renderer.view);

var message = new Text();

function setup() {
    message.text = "Hello Pixi!";
    message.style = {ontFamily: "Arial", fontSize: 32, fill: "white"};
    message.position.set(54, 96);
    stage.addChild(message);

    renderer.render(stage);
}
function changeText(){
    message.text = "Text changed!";
    message.style = {font: "16px PetMe64", fill: "pink"};
    stage.addChild(message);
    renderer.render(stage);
}
function longTextEnglish(){
    message.text = "In the winter of 1845, a poor little girl tried to sell matches in the streets for her family. It was a cold, cold evening. It was snowing and people in horse carriages and in the streets did not notice the little girl... - Not until the next morning, when she was lying quiet in the snow...";
    message.style = {font: "16px PetMe64", fill: "white",wordWrap: true, wordWrapWidth: 236, align: "left"};
    message.position.set(10, 10);
    stage.addChild(message);
    renderer.render(stage);
}
function longTextChinese(){
    message.text = "1845年的冬天，一个可怜的小女孩在大街上卖火柴，以此维持家里的生活。这是一个冰冷的下着雪的夜晚，那些乘着马车匆匆而过的人们并没有注意到这个小女孩……直到第二天早晨，她静静地躺在雪中……";
    message.style = {font: "16px PetMe64", fill: "white",wordWrap: true, wordWrapWidth: 236, align: "left"};
    message.position.set(10, 10);
    stage.addChild(message);
    renderer.render(stage);
}
setup();
</script>
<div>
    <button type="button" onclick="changeText()">改变文字</button>
    <button type="button" onclick="longTextEnglish()">长文本英语自动换行</button>
    <button type="button" onclick="longTextChinese()">尝试长文本中文自动换行</button>
    <button type="button" onclick="setup()">还原</button>
</div>
</body>
</html>